<?php $catid = 151;?>
{template "content","header_page"}
<script type="text/javascript" src="{JS_PATH}nsrmodel/js/jquery-3.2.0.min.js"></script>
<script src="{JS_PATH}nsrmodel/js/swiper.js"></script>
<div class="bgbody" style="background: url(http://m.nsr.com.cn/resource/uploadfile/column_icon/19.jpg) no-repeat top center;">
    <div class="main">

        <div class="rightbox">

            <div class="tipsearch">
                <div class="topnav">
                <ul>
                    <li><a href="/index.php?m=content&c=index&a=lists&catid={$catid}" class="onin">导师风采</a><!--<span>|</span>--></li>
                    <!--<li>{$title}</li>-->
                </ul>
                </div>
            </div>

            <!--teachersbox-->
            <div class="teachersbox">
                <!--shiZ List-->
                <div class="daoshi-box">
                    <div class="daoshiImgS">
                        <img src="{$info['imageSquare']}" />
                    </div>
                    <div class="daoshiDetails" id="boxsz" style="width: 560px; float: right;">
                        <h2>{$info['realName']}</h2>
                        <p>{$info['award']}</p>
                    </div>
                    <script>
                        function show() {
                            var box = document.getElementById("boxsz");
                            var text = box.innerHTML;
                            var newBox = document.createElement("div");
                            var btn = document.createElement("a");
                            newBox.innerHTML = text.substring(0, 200);
                            btn.innerHTML = text.length > 200 ? "...显示全部" : "";
                            btn.href = "###";
                            btn.onclick = function() {
                                if(btn.innerHTML == "...显示全部") {
                                    btn.innerHTML = "收起";
                                    newBox.innerHTML = text;
                                } else {
                                    btn.innerHTML = "...显示全部";
                                    newBox.innerHTML = text.substring(0, 200);
                                }
                            }
                            box.innerHTML = "";
                            box.appendChild(newBox);
                            box.appendChild(btn);
                        }
                        show();
                    </script>

                </div>
                <!--shiZ List EDN-->

                <!--shiziPic 图集-->
                {if !empty($talentPics)}
                {loop $talentPics $k $v}
                <div class="shiziPic" id="pics_{$v['id']}" {if $k!=0}style="display:none;"{/if}>
                    <!-- Swiper -->
                    <div class="swiper-container picDbox picDbo_{$v['id']}">
                        <div class="swiper-wrapper" id="talent_pics">
                            {loop $v[pictureurls] $v}
                            <div class="swiper-slide"><img src="{$v[url]}" /></div>
                            {/loop}
                        </div>

                        <!-- Add Arrows -->
                        <div class="swiper-button-next swiper-button-white next-pic"></div>
                        <div class="swiper-button-prev swiper-button-white prev-pic"></div>
                    </div>
                </div>
                {/loop}
                {/if}
                <!--shiziPic 图集 end-->
                <input type="hidden" id="selected_id" name="selected_id" value="{$talentPics[0]['id']}">
                <!--导师图集列表-->
                {if count($talentPics)>1}
                <div class="shiziList">
                    <div class="swiper-container gallery-thumbs lastList">
                        <div class="swiper-wrapper">
                            {loop $talentPics $v}
                            <div class="swiper-slide" onclick="ajax_pics({$v['id']});"><img src="{$v['image']}"/></div>
                            {/loop}
                        </div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next swiper-button-white"></div>
                        <div class="swiper-button-prev swiper-button-white"></div>
                    </div>
                </div>
                {/if}
                <!--导师图集列表 end-->

                </div>
                <!--teachersbox end-->
            </div>
            <!-- Swiper JS -->
            <script>
                function pics_swiper(id){
                    var swiper = new Swiper('.picDbo_'+id, {
                        initialSlide :0,
                        pagination: '.swiper-pagination',
                        paginationClickable: true,
                        nextButton: '.next-pic',
                        prevButton: '.prev-pic',
                        spaceBetween: 30,
                        onSlideChangeEnd: function(swiper){
                            if(swiper.isEnd) {
                                swiper.nextButton[0].style.display='none';
                            } else {
                                swiper.nextButton[0].style.display='block';
                            }
                        }
                    });
                }
                pics_swiper({$pics_id});
                var galleryThumbs = new Swiper('.gallery-thumbs', {
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    spaceBetween: 10,
                    slidesPerView: 4,
                    touchRatio: 0.2,
                    //loop: true,
                    loopedSlides: 5, //looped slides should be the same
                    slideToClickedSlide: true
                });
                //galleryTop.params.control = galleryThumbs;
                //galleryThumbs.params.control = galleryTop;
                function ajax_pics(id) {
                    $('.shiziPic').hide();
                    $('#pics_'+id).show();
                    pics_swiper(id);
                }
            </script>
        </div>
    <div class="clear"></div>
</div>
  
 
 
{template "content","footer"}
</body>